<script setup>
  import { ref, onMounted } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import EvaItem from "@/components/EvaItem.vue";
  import { HeartFilled, InfoCircleOutlined, ShopOutlined, DoubleRightOutlined, HeartOutlined } from '@ant-design/icons-vue'
  import PageHeader from "@/components/PageHeader.vue";
  import GoodsSwiper from "@/views/goods/components/GoodsSwiper.vue";
  import SkuImg from "@/views/goods/components/SkuImg.vue";
  import GoodsItem from "@/components/GoodsItem.vue";
  import {getGoodsDetailApi, collectApi} from "@/api/index.js";
  import {isLogin, splitArr} from "@/utils/index.js";
  import {addToCartApi} from "@/api/modules/cart.js";
  import {message} from "ant-design-vue";
  import {useCommStore} from "@/stores/index.js";
  const router = useRouter();
  const route = useRoute();
  const goodsSpu = ref()
  const goodsType = ref() // 商品类型 gift：礼品；goods：商品
  // 商品详情
  const goodsDetail = ref({
    id: '',
    img: '',
    sku: '',
    spu: '',
    imgs: [],
    name: '',
    detail: '',
    multi: '', // 是否是多规格
    price: '', // 价格
    original_price: '', // 原始价格
    stock: '', // 库存
    score: '', // 评价
    supplier_name: '', // 供货商
    is_collect: undefined,
    category: {
      title: ''
    }, // 分类信息
    comment: [], // 商品评价
    comment_count: '', // 评价数量
    wholesale_price: '', // 阶梯价格
    wholesale_number: '', // 阶梯数量
    return_policy: '', // 退货政策
    sku_lists: [], // 多规格信息
    skuInfo: {
      sku: '',
      stock: '',
      spece_value_title: '', // 规格名称
      original_price: '',
      price: '',
      sale: '',
      wholesale_price: '', // 阶梯价格
      wholesale_number: '', // 阶梯数量
      spece_id: '',
    }, // 默认的规格信息
  })
  // 广告
  const adList = ref([])
  // 推荐商品
  const recommendList = ref([])
  // 店铺列表
  const shopList = ref([])
  // 退货政策
  const return_policy = ref()

  const goEvaList = () => {
    router.push({ name: 'evaList', query: { id: goodsDetail.value.id } })
  }
  const goShop = (id) => {
    router.push({ name: 'shop', query: { id } })
  }
  // 选中sku
  const pickSku = (sku) => {
    console.log(sku)
    goodsDetail.value.skuInfo = sku
  }
  // 加入购物车
  const addToCart = () => {
    const { shopId } = useCommStore()
    if (isLogin(true)) {
      if (goodsType.value === 'goods') {
        const params = {
          num: 1,
          sku: goodsDetail.value.skuInfo.sku,
          shop_id: shopId,
        }
        addToCartApi(params).then(res => {
          console.log(res)
          message.success('添加成功')
        })
      } else {
        router.push({name: 'giftConfirmOrder', query: {goods_id: goodsDetail.value.skuInfo.id}})
      }
    }
  }
  // 点击广告
  const tapAd = (ad) => {
    console.log(ad)
    const { url, url_type, url_switch } = ad
    if (url_switch !== 1) return
    if (url_type === 'h5') return location.href = url
    router.push('/goods?type=goods&spu='+'G250314455')
  }
  const getGoodsDetail = () => {
    getGoodsDetailApi({spu: goodsSpu.value}).then(res => {
      goodsDetail.value = res.data
      adList.value = res?.goods_banner
      recommendList.value = res?.recommend_goods
      shopList.value = res.shop
      return_policy.value = res?.return_policy
      if(goodsDetail.value.multi === 'true') {
        goodsDetail.value.sku_lists.unshift(goodsDetail.value.skuInfo)
        goodsDetail.value.sku_lists = splitArr(goodsDetail.value.sku_lists)
      }
    })
  }
  const collect = (i) => {
    console.log(i)
  }
  const collectGoods = () => {
    const { id, is_collect } = goodsDetail.value
    collectApi({type: 2, id}).then(() => {
      goodsDetail.value.is_collect = is_collect === 0 ? 1 : 0
    })
  }
  onMounted(() => {
    const { spu, type } = route.query
    goodsSpu.value = spu
    goodsType.value = type
    getGoodsDetail()
  })
</script>

<template>
  <div class="goods-page">
    <PageHeader>
      <component
        v-if="goodsType !== 'gift'"
        :is="goodsDetail.is_collect===0?HeartOutlined:HeartFilled"
        @click="collectGoods"
        style="font-size: 22px;color: var(--primary)"
      />
<!--      <a-popover content="欢迎提出您的建议" placement="bottom">-->
<!--        <InfoCircleOutlined style="font-size: 22px"/>-->
<!--      </a-popover>-->
      <a-button type="primary" size="small" @click="addToCart" style="background: var(--primary)"> {{ goodsType === 'gift'?'立即兑换':'加入购物车'}} </a-button>
    </PageHeader>
    <div class="goods-main">
      <div class="goods-info-container">
        <div class="goods-info">
          <div class="goods-banner">
            <GoodsSwiper :images="goodsDetail.imgs" v-if="goodsDetail.imgs.length"/>
          </div>
          <div class="goods-details">
            <div class="goods-title">
              <span> {{ goodsDetail.name }}  </span>
              <div class="eva-num" @click="goEvaList">
                <i class="fa-solid fa-star"></i>&nbsp;{{ goodsDetail.score }} · {{ goodsDetail.comment_count }} 条 &rsaquo;
              </div>
            </div>
            <div class="goods-price">
              <div class="base-price">
                <div class="item"> {{ goodsType === 'goods'?goodsDetail.skuInfo.price:goodsDetail.skuInfo.gift_price }} </div>
                <div class="item fh"> {{ goodsDetail.skuInfo.original_price }} </div>
              </div>
              <div class="jt-price" v-if="goodsType === 'goods'">
                <div class="item"> 起始数量：{{ goodsDetail.wholesale_number }} </div>
                <div class="item"> 阶梯价格：{{ goodsDetail.skuInfo.wholesale_price }} </div>
              </div>
            </div>
            <div class="shop-info">
              <ShopOutlined style="color: #999; font-size: 16px;" />
              <div class="shop-name">
                <a-tag
                  :bordered="false"
                  v-for="tag in shopList"
                  :key="tag.img"
                  @click="goShop(tag.id)"
                > {{ tag.name }} </a-tag>
              </div>
            </div>
            <div class="sku-info" v-if="goodsDetail.multi === 'true'">
              <div class="sku-title"> 选择规格： <a-tag :bordered="false"> {{ goodsDetail.skuInfo.spece_value_title }} </a-tag> </div>
              <div class="sku-banner">
                <SkuImg
                  :sku-list="goodsDetail.sku_lists"
                  v-if="goodsDetail.sku_lists.length"
                  @pickSku="pickSku"
                />
              </div>
            </div>
            <div class="d-item">
              <div class="label"> 货号 </div>
              <div class="value"> {{ goodsDetail.skuInfo.sku }} </div>
            </div>
            <div class="d-item">
              <div class="label"> 供应商 </div>
              <div class="value"> {{ goodsDetail.supplier_name }} </div>
            </div>
            <div class="d-item">
              <div class="label"> 库存 </div>
              <div class="value"> {{ goodsDetail.skuInfo.stock }} </div>
            </div>
            <div class="d-item">
              <div class="label"> 分类 </div>
              <div class="value"> {{ goodsDetail.category?.title }} </div>
            </div>
            <!-- 退货政策 -->
            <div class="end-info" v-html="return_policy"> </div>
          </div>
        </div>
        <div class="rec-goods">
          <div class="rec-title">
            <div class="text"> 商品评价 </div>
            <div class="more" @click="goEvaList">
              <text> 查看更多 </text>
              <DoubleRightOutlined style="font-size: 16px;" />
            </div>
          </div>
          <div class="eva-list" v-if="goodsDetail.comment.length">
            <EvaItem
              :eva="item"
              v-for="item in goodsDetail.comment"
              :key="item.id +'-'+ item.star"
            />
          </div>
          <a-empty description="该商品暂未评价" v-else/>
        </div>
        <div class="rec-goods">
          <div class="rec-title"> 商品详情 </div>
          <div class="goods-xq" v-html="goodsDetail.detail">  </div>
        </div>
        <div class="rec-goods" v-if="recommendList.length && goodsType !== 'gift'">
          <div class="rec-title"> 推荐商品 </div>
          <div class="goods-list">
            <GoodsItem :info="item" v-for="(item, index) in recommendList" :key="item.spu" @collect="collect(index)"/>
          </div>
        </div>
      </div>
      <div class="ad" v-if="adList.length">
        <div
          class="ad-item"
          v-for="item in adList"
          :key="item?.create_time"
          @click="tapAd(item)"
        >
          <img :src="item?.pic" alt="" class="ad-img" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .goods-page {
    width: 100%;
    padding: 40px 0 20px;
    max-width: 1300px;
    .anticon {
      cursor: pointer;
      font-size: 24px;
      margin-right: 10px;
    }
    .goods-main {
      display: flex;
      gap: 20px;
      .goods-info-container {
        flex: 1;
        .goods-info {
          display: flex;
          gap: 30px;
          .goods-banner {
            flex: 1;
          }
          .goods-details {
            flex: 1;
            display: flex;
            flex-direction: column;
            .goods-title {
              line-height: 28px;
              margin-bottom: 10px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              span {
                font-size: 20px;
                font-weight: bold;
              }
              .eva-num {
                color: #242424;
                cursor: pointer;
                &:hover {
                  color: var(--primary);
                }
              }
            }
            .goods-price {
              gap: 10px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .base-price, .jt-price {
                gap: 10px;
                display: flex;
                align-items: center;

              }
              .base-price {
                .item {
                  color: var(--primary);
                  font-size: 18px;
                  font-weight: bold;
                  &:nth-last-of-type(1) {
                    color: #999;
                    text-decoration: line-through;
                  }
                }
              }
            }
            .shop-info {
              display: flex;
              align-items: center;
              margin-bottom: 5px;
              .ant-tag {
                cursor: pointer;
                &:hover {
                  color: var(--primary);
                }
              }
            }
            .sku-info {
              width: 100%;
              margin-bottom: 10px;
              .sku-title {
                color: #999;
                font-size: 14px;
                font-weight: bold;
                margin-bottom: 10px;
              }
              .sku-banner {
                width: 100%;
              }
            }
            .d-item {
              gap: 5px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              color: #999;
              padding: 5px;
              font-size: 14px;
              line-height: 20px;
              .label, .value {
                flex: 1;
              }
              .value {
                color: #242424;
              }
            }
            .end-info {
              padding: 10px;
              margin-top: 10px;
              border-radius: 10px;
              background-color: #f8f8f8;
            }
          }
        }
        .rec-goods {
          .rec-title {
            color: #242424;
            font-size: 24px;
            font-weight: bold;
            margin: 30px 0 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .more {
              color: #999;
              font-size: 16px;
              cursor: pointer;
            }
          }
          .eva-list {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 20px;
          }
          .goods-xq {
            :deep(p), :deep(img) {
              width: 100%;
            }
          }
          .goods-list {
            margin-top: 10px;
          }
        }
      }
      .ad {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 200px;
        .ad-item {
          width: 100%;
          .ad-img {
            width: 100%;
          }
        }
      }
    }
  }
  @media (max-width: 750px) {
    .goods-info, .eva-list {
      display: block !important;
    }
    .ad {
      display: none !important;
    }
  }
</style>